<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile.ui.js"></script>
  </head>
  <body>

    <div data-role="page" data-theme="a" class="ui-noboxshadow">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <div class="nav">
          <a data-ajax="false" href="../menus.html" class="nav-link"><i class="fas fa-chevron-left"></i> 首页</a>
          <h3 class="nav-title">Popup</h3>
          <a data-ajax="false" href="javascript:;" class="nav-link floatMenu">菜单</a>
        </div>
      </div>
      <div role="main" class="ui-content">
        <div class="demo">
          <a data-ajax="false" href="menus.html" class="link">样式设计</a>
        </div>

        <div class="demo">
          <h5>警示框</h5>
          <a href="javascript:;" class="link" onclick="alert1();">普通警示框</a>
          <br><br>
          <a href="javascript:;" class="link" onclick="alert2();">带回调警示框</a>
        </div>

        <div class="demo">
          <h5>确认提示框</h5>
          <a href="javascript:;" class="link" onclick="confirm1();">普通确认提示框</a>
          <br><br>
          <a href="javascript:;" class="link" onclick="confirm2();">带回调确认提示框</a>
          <br><br>
          <a href="javascript:;" class="link" onclick="confirm3();">带标题确认提示框</a>
        </div>

        <div class="demo">
          <h5>加载框</h5>
          <a href="javascript:;" class="link" onclick="loading1();">普通加载框</a>
        </div>

        <div class="demo">
          <h5>操作项</h5>
          <a href="javascript:;" class="link" onclick="actions1()">打开操作项</a>
        </div>

        <div class="demo">
          <h5>浮动菜单</h5>
          <a href="javascript:;" class="link floatMenu">点击打开浮动菜单</a>
        </div>

        <div class="demo">
          <h5>弹出菜单</h5>
          <a href="javascript:;" class="link" onclick="popupMenu();">弹出菜单</a>
        </div>

        <ul data-role="listview">
          <li>
            <a href="javascript:;" class="popup-select-trigger">
              <select id="select1" data-role="none" class="popup-select">
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
              </select>
            </a>
          </li>
        </ul>

      </div>
    </div>
    <script type="text/javascript">

      $(function(){

        $('.floatMenu').on('click', function(){
          var btn = this;
          $.floatMenus({
            position: btn,
            buttons: [
              { text: '查看新特性', onClick: function(){ $.alert('您选择了查看新特性'); } },
              { text: '检查更新', onClick: function(){ $.alert('您选择了检查更新'); } },
              { text: '退出', onClick: function(){ $.alert('您选择了退出'); } },
            ],
          }); 
        });

      });

      function popupMenuWithSelect(){
        $('#select1').popupMenu();
      }

      function alert1(){
        $.alert('输入错误，请重新输入！');
      }

      function alert2(){
        $.alert('输入错误，请重新输入！', function(){
          $.alert('点击确认');
        });
      }

      function confirm1(){
        $.confirm('您确认要删除吗？');
      }

      function confirm2(){
        $.confirm('您确认要删除吗？', function(){
          $.alert('您点击了确认！');
        });
      }

      function confirm3(){
        $.confirm('警告', '您确认要删除吗？', function(){
          $.confirm('您想好了吗？', function(){
            $.alert('已删除！');
          });
        });
      }

      function loading1(){
        $.loading('show');
        setTimeout(function(){
          $.loading('hide');
        }, 2000);
      }

      function actions1(){
        $.actions([
          { text: '查看新特性', onClick: function(){ $.alert('您选择了查看新特性'); } },
          { text: '检查更新', onClick: function(){ $.alert('您选择了检查更新'); } },
          { text: '退出', onClick: function(){ $.alert('您选择了退出'); } },
        ]); 
      }

      function popupMenu(){
        $.popupMenu({
          items: [
            {
              title: '复制',
              onSelect: function(){
                $.alert('复制');
              }
            },
            {
              title: '删除',
              onSelect: function(){
                $.alert('删除');
              }
            }
          ]
        });
      }

    </script>
  </body>
</html>